<template>
    <el-container style="text-align: center">
        <el-header style="border-bottom: 1px #ccc solid;">
            <router-link to="/" style="color: black;font-size: 25px;line-height: 50px;font-weight: bold">小九的工具箱</router-link>
        </el-header>
        <el-main>
            <el-row>
                <el-button type="primary" icon="el-icon-search" @click="showDialog(1)">
                    百度广告排名-PC

                </el-button>
            </el-row>
            <el-row >
                <el-button type="success" icon="el-icon-search" @click="showDialog(2)">
                    百度广告排名-Mobile
                </el-button>
            </el-row>
        </el-main>
        <el-dialog :title=" '百度广告排名-' + (mode === 1 ? 'PC' : 'Mobile')"
                   :visible.sync="dialogVisible">

            <el-input type="textarea" v-model="keywords"
                      :rows="15" placeholder="每行输入一个关键词"></el-input>
            <el-alert title="每行输入一个关键词"
                      type="info"
                      :closable="false"
                      show-icon>
            </el-alert>
            <el-alert title="如不输入关键词， 则进入手动搜索页面"
                      type="info"
                      :closable="false"
                      show-icon>
            </el-alert>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="searchBaiduAD">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<style>
    .el-row{margin-bottom: 10px}
    .el-button{width: 200px}
</style>
<script>

    export default {
        name: 'searchBaidu',
        data() {
            return {
                keywords: '',
                mode: 0,                //模式，1：pc搜索，2：mobile搜索
                dialogVisible: false   //是否显示弹出框
            }
        },
        beforeCreate() {
            var _this = this;
            _this.$electron.ipcRenderer.on('baiduSearchSuccess', (event, arg) => {  //注册监听事件
                _this.mode = 0;
                _this.dialogVisible = false
                console.log('搜索完成：' + arg)
            })
        },
        methods: {
            showDialog(mode) {
                this.mode = mode;
                this.dialogVisible = true
            },
            searchBaiduAD() {
                let keywords = this.keywords ? this.keywords.trim() : ''
                if (keywords) {
                    this.$electron.ipcRenderer.send('baiduSearch', {
                        mode: this.mode,
                        keywords: keywords.split('\n')
                    })
                } else {
                    this.$confirm('关键词为空，是否进入手动搜索页面？').then(() => {
                        this.$electron.ipcRenderer.send('baiduSearch', {mode: this.mode})
                    }).catch(() => {
                    });
                }
            }
        },
        beforeDestroy() {
        }
    }
</script>

<style>

</style>
